<template>
  <div class="app-container search-table-box aidex-table">
    <el-tabs>
      <el-tab-pane label="销项系统配置">
        <el-card class="box-card" style="margin-bottom: 12px;">
          <div slot="header" class="clearfix">
            <span>开票通道</span>
            <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>
          </div>
          <div>
            <el-form ref="form1" label-width="80px" label-position="left">
              <el-form-item label="数电通道:">
                <el-radio-group v-model="form.channelCode">
                  <el-radio label="暂不启用"></el-radio>
                  <el-radio label="电子税局"></el-radio>
                  <el-radio label="乐企接口"></el-radio>
                </el-radio-group>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">数电发票目前存在两个开票通道可用，电子税局与乐企接口分别需要配置不同的登录参数，请根据实际业务选择</el-link>
              </div>
            </el-form>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-bottom: 12px;">
          <div slot="header" class="clearfix">
            <span>开票业务</span>
            <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>
          </div>
          <div>
            <el-form ref="form2" label-width="250px" label-position="left">
              <el-form-item label="不含税金额×税率与税额的误差范围:">
                <el-row>
                  <el-col :span="5">
                    <el-radio-group v-model="form.errorRanger">
                      <el-radio label="1">默认(1分)</el-radio>
                      <el-radio label="other">自定义</el-radio>
                    </el-radio-group>
                  </el-col>
                  <el-col :span="12">
                    <el-select v-model="form.fen" placeholder="请选择" size="mini" v-if="form.errorRanger != 1" style="width: 80px;">
                      <el-option key="1" label="1" value="1"></el-option>
                      <el-option key="2" label="2" value="2"></el-option>
                      <el-option key="3" label="3" value="3"></el-option>
                      <el-option key="4" label="4" value="4"></el-option>
                      <el-option key="5" label="5" value="5"></el-option>
                      <el-option key="6" label="6" value="6"></el-option>
                    </el-select><span v-if="form.errorRanger != 1">分</span>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">企业可自定义配置不含税金额x税率与金额的误差范围，支持配置为1-6分，配置后系统内的单据录入、合并拆分均会基于此误差范围进行校验</el-link>
              </div>
            </el-form>
            <el-divider></el-divider>
            <el-form ref="form3" label-width="140px" label-position="left">
              <el-form-item label="数据访问权限设置:">
                <el-row>
                  <el-col :span="5">
                    <el-radio-group v-model="form.authType">
                      <el-radio label="0">不控制</el-radio>
                      <el-radio label="1">根据人员控制</el-radio>
                    </el-radio-group>
                  </el-col>
                  <el-col :span="12">
                    <el-button type="text" @click="handleSettingAuth" v-if="form.authType == 1">设置</el-button>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">开启根据人员控制后，结算单管理、电票直开、开票申请、审核开票、待开发票、销项发票池仅能查询到设置的访问权限内的数据，但开启后查询效率可能会有细微影响</el-link>
              </div>
            </el-form>
          </div>
        </el-card>

        <el-card class="box-card" style="margin-bottom: 12px;">
          <div slot="header" class="clearfix">
            <span>结算单管理</span>
            <el-button style="float: right; padding: 3px 0" type="text">保存</el-button>
          </div>
          <div>
            <el-form ref="form4" label-width="80px" label-position="left">
              <el-form-item label="单号校验:">
                <el-row>
                  <el-col :span="5">
                    <el-checkbox v-model="form.isCheck">启用</el-checkbox>
                  </el-col>
                </el-row>
              </el-form-item>
              <div style="margin: -22px 0 10px 0;">
                <el-link type="info" disabled icon="el-icon-info">启用后，导入结算单/待开发票的订单号将进行唯一性校验，系统内已存在的订单号将无法重复录入</el-link>
              </div>
            </el-form>
          </div>
        </el-card>

      </el-tab-pane>
    </el-tabs>


    <!-- 编辑-公司-弹出查询 -->
    <el-dialog v-dialogDrag  :close-on-click-modal="false" title="设置数据访问权限" :visible.sync="userDialogOpen" width="900px" append-to-body>
      <div class="dialog_box" style="height:550px;">
        <el-form label-position="left" :model="userQueryParams" :inline="true"  ref="userQueryForm" label-width="88px" >
          <el-form-item  prop="userSearchValue">
            <el-input
              v-model="userQueryParams.searchValue"
              size="mini"
              placeholder="请输入用户名称"
              @keyup.enter.native="handlesiteCodeQuery"
              clearable
            />
          </el-form-item>
          <el-form-item>
            <el-button type="primary" icon="el-icon-search" size="mini" @click="handleUserQuery">查询</el-button>
          </el-form-item>
        </el-form>
        <el-table v-loading="userSelectLoading" :data="userList"
                  height="400"
                  stripe
                  ref="userTable"
                  :row-key="getUserListRowKey"
                  :row-style="{height:2+'px'}"
                  :header-cell-style= "{
                        'font-size': '14px !important',
                        'font-weight': '500 !important',
                        'color': 'rgb(0 0 0)',
                'background-color': 'rgb(205 224 255)',
                      }"
                  :cell-style="{padding:'4px 4px'}"
                  border>
          <el-table-column label="序号" type="index" align="center" width="55">
            <template slot-scope="scope">
              <span>{{(userQueryParams.pageNum - 1) * userQueryParams.pageSize + scope.$index + 1}}</span>
            </template>
          </el-table-column>
          <!-- 数据 -->
          <el-table-column prop="userName" label="用户名" width="180"></el-table-column>
          <el-table-column prop="nickName" label="姓名" width="180"></el-table-column>
          <el-table-column prop="phonenumber" label="手机号码" ></el-table-column>
          <el-table-column label="数据范围" align="center" class-name="small-padding fixed-width" width="200">
            <template slot-scope="scope">
              <el-radio-group v-model="scope.row.rangeType">
                <el-radio label="0">由我创建</el-radio>
                <el-radio label="1">全部</el-radio>
              </el-radio-group>
            </template>
          </el-table-column>
        </el-table>
        <pagination
          v-show="userTotal>0"
          :total="userTotal"
          :page.sync="userQueryParams.pageNum"
          :limit.sync="userQueryParams.pageSize"
          @pagination="getUserList"
        />
      </div>
      <div slot="footer" class="dialog-footer">
        <el-button size="mini" type="primary" @click="confirmUser">保 存</el-button>
        <el-button size="mini" @click="userCancel">取 消</el-button>
      </div>
    </el-dialog>

  </div>
</template>
<style lang="scss">
  .el-card__header .clearfix::before{
    content: "";
    display: block;
    width: 3px;
    height: 20px;
    position: absolute;
    background-color: #297cf0;
    left: 13px;
    margin-top: 11px;
    -ms-transform: translateY(-50%);
    transform: translateY(-50%);
  }

</style>

<script>

import { listConfig, getConfig, delConfig, addConfig, updateConfig } from "@/api/saleconfig/config";

import { listUser, getUser, delUser, addUser, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";

/* 城市列表 **/
import { provinceList, cityList, districtList } from "@/api/system/city";

export default {
  name: "Config",
  data() {
    return {
      advanced: false,
      tableHeight: this.getInitTableHeight(),
      // 遮罩层
      loading: true,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 显示搜索条件
      showSearch: true,
      // 总条数
      total: 0,
      // 销项系统配置表格数据
      configList: [],
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      // 查询参数
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        params:{

        },
        configId: null,
        custId: null,
        siteCode: null,
        siteName: null,
        channelCode: null,
        channelName: null,
        errorRanger: null,
        errorRangerName: null,
        fen: null,
        authType: null,
        authTypeName: null,
        isCheck: null,
        isCheckName: null,
      },
      // 表单参数
      form: {},
      // 表单校验
      rules: {
      },

      /* ======================================用户选择======================================  */
      userName: null,
      userTotal: 0,
      userList: [],
      userDialogOpen: false,
      userSelectLoading: false,
      userQueryParams: {
          searchValue: null,
          pageNum: 1,
          pageSize: 20,
      },

      /* ======================================省市区======================================  */
      // 省
      provinceId: null,
      provinceList:[],
      // 市
      cityId: null,
      cityList:[],
      // 区
      districtId: null,
      districtList:[],

    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 行样式 */
    rowClass({ row, rowIndex }) {
      if (this.ids.includes(row.id)) {
          return { background: "#d9edf7", height:'20px' };
      } else {
          return { height:'20px'};
      }
    },
   /** 隐藏搜索按钮操作 */
   showSearchFun(isShowSearch){
      this.showSearch = isShowSearch
      let oldHeight = this.$refs.queryRef.$el.offsetHeight
      if(!isShowSearch){
          //当前是显示状态
          oldHeight = oldHeight + 12
      }else{
          oldHeight = oldHeight - 12
      }
      this.$nextTick(() => (
         this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
      ))
    },
    /** 展开按钮操作 */
    toggleAdvanced() {
      const oldHeight = this.$refs.queryRef.$el.offsetHeight
      this.advanced = !this.advanced
      this.$nextTick(() => (
         this.tableHeight = this.$refs.tableRef.$el.offsetHeight - (this.$refs.queryRef.$el.offsetHeight-oldHeight)
      ))
    },
    /** 查询销项系统配置列表 */
    getList() {
      this.loading = true;
      listConfig(this.queryParams).then(response => {
        this.configList = response.rows;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 取消按钮
    cancel() {
      this.open = false;
      this.reset();
    },
    // 表单重置
    reset() {
      this.form = {
        id: null,
        configId: null,
        custId: null,
        siteCode: null,
        siteName: null,
        channelCode: null,
        channelName: null,
        errorRanger: null,
        errorRangerName: null,
        fen: null,
        authType: null,
        authTypeName: null,
        isCheck: null,
        isCheckName: null,
        createBy: null,
        createTime: null,
        updateBy: null,
        updateTime: null
      };
      this.resetForm("form");
    },


      /* ※※ 查询 省市区 相关方法 start ※※ */
      // 获取省
      getProvinceList(){
          provinceList().then(response => {
              this.provinceList = response.data;
          });
      },
      // 获取市
      getCityList(){
          console.log(this.provinceId);
          cityList( {"parentId" : this.provinceId } ).then(response => {
              this.cityList = response.data;
          });
      },
      // 获取区县
      getDistrictList(){
          districtList( {"parentId" : this.cityId } ).then(response => {
              this.districtList = response.data;
          });
      },
      // 选中省份
      handleChangeProvince(val){
          // 给表单省字段赋值
          this.form.provinceid = val;
          let province = {};
          province = this.provinceList.find((item)=>{
              return item.id === val;
          });
          this.form.province = province.name;
          // 城市数据清空、区县数据清空;
          this.cityList = [];
          this.districtList = [];
          // 已选市、区数据清空
          this.cityId = null;
          this.districtId = null;
          // 表单城市、区县数据清空
          this.form.cityid = null;
          this.form.city = null;
          this.form.areaid = null;
          this.form.area = null;
          // 获取城市数据
          this.getCityList();
      },
      // 清空省份
      handleClearProvince(){
          // 城市数据清空、区县数据清空;
          this.cityList = [];
          this.districtList = [];
          // 已选市、区数据清空
          this.cityId = null;
          this.districtId = null;
          // 表单城市、区县数据清空
          this.form.cityid = null;
          this.form.city = null;
          this.form.areaid = null;
          this.form.area = null;
      },
      // 选中城市
      handleChangeCity(val){
          // 给表单市字段赋值
          this.form.cityid = val;
          let city = {};
          city = this.cityList.find((item)=>{
              return item.id === val;
          });
          this.form.city = city.name;
          // 区县数据清空
          this.districtList = [];
          // 已选区县清空
          this.districtId = null;
          // 表单区县清空
          this.form.areaid = null;
          this.form.area = null;
          // 获取城市数据
          this.getDistrictList();
      },
      // 清空省份
      handleClearCity(){
          // 区县数据清空
          this.districtList = [];
          // 已选区县清空
          this.districtId = null;
          // 表单区县清空
          this.form.areaid = null;
          this.form.area = null;
      },
      // 选中区县
      handleChangeDistrict(val){
          // 给表单省字段赋值
          this.form.areaid = val;
          let district = {};
          district = this.districtList.find((item)=>{
              return item.id === val;
          });
          this.form.area = district.name;
      },
      // 清空省份
      handleClearDistrict(){
          // 表单区县清空
          this.form.areaid = null;
          this.form.area = null;
      },

      /* ※※ 查询 省市区 相关方法 end ※※ */




    /** 搜索按钮操作 */
    handleQuery() {
      this.queryParams.pageNum = 1;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.resetForm("queryForm");
      this.handleQuery();
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      this.ids = selection.map(item => item.id)
      this.single = selection.length!==1
      this.multiple = !selection.length
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加销项系统配置";
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      const id = row.id || this.ids
      getConfig(id).then(response => {
        this.form = response.data;
        this.open = true;
        this.title = "修改销项系统配置";
      });
    },
    /** 提交按钮 */
    submitForm() {
      this.$refs["form"].validate(valid => {
        if (valid) {
          if (this.form.id != null) {
            updateConfig(this.form).then(response => {
              this.$modal.msgSuccess("修改成功");
              this.open = false;
              this.getList();
            });
          } else {
            addConfig(this.form).then(response => {
              this.$modal.msgSuccess("新增成功");
              this.open = false;
              this.getList();
            });
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      const ids = row.id || this.ids;
      this.$modal.confirm('是否确认删除销项系统配置编号为"' + ids + '"的数据项？').then(function() {
        return delConfig(ids);
      }).then(() => {
        this.getList();
        this.$modal.msgSuccess("删除成功");
      }).catch(() => {});
    },
    /** 导出按钮操作 */
    handleExport() {
      this.download('saleconfig/config/export', {
        ...this.queryParams
      }, `config_${new Date().getTime()}.xlsx`)
    },
    /** 数据访问权限设置 */
    handleSettingAuth(){
      this.userCodeDialogOpen();
    },


    /* ※※ 设置用户 相关方法 start ※※ */
    /** ① 弹出编辑内容-公司代码 */
    userCodeDialogOpen(){
        this.userDialogOpen = true;
        this.getUserList();
    },
    /** ③ 行KEY **/
    getUserListRowKey(row) {
        return row.userId
    },
    /** ⑤ 点击查询按钮 **/
    handleUserQuery(){
        this.userQueryParams.pageNum = 1;
        this.getUserList();
    },
    /** ⑥ 查询 **/
    getUserList(){
        this.userSelectLoading = true;
        listUser(this.userQueryParams).then(response => {
            this.userList = response.rows;
            if(this.userList){
                this.userList.forEach(user => {
                    user.rangeType = '1';
                })
            }
            console.log(this.userList);
            this.userTotal = response.total;
            this.userSelectLoading = false;
        });
    },
    /** ⑦ 点击确认查询 **/
    confirmUser() {
        this.userCancel();
    },
    /** ⑧ 点击关闭查询弹出框 **/
    userCancel() {
        this.userDialogOpen = false;
    },
    /* ※※ 编辑 公司代码 相关方法 end ※※ */
  }
};
</script>
